<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <h3>
      {{ arrsss.name }}
    </h3>
    <img :src="arrsss.pic" alt="" />
    <p v-html="arrsss.content"></p>
    <h4>功能主治: {{ arrsss.tag }}</h4>
    <p>做法时长:{{ arrsss.preparetime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arrsss: {},
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {},
  },

  mounted() {
    let id = this.$route.query.id;
    // console.log(`收到新值 ${id} `)
    this.axios
      .get(`/recipe/detail?id=${id}&appkey=5a432523cf279ce2`)
      .then((res) => {
        console.log(res.data.result);
        this.arrsss = res.data.result;
      });
  },
};
</script>

<style scoped>
h3 {
  margin-left: 35%;
}

img {
  width: 100%;
  height: 300px;
}
</style>
